<template>
  <div>
    <h3>app组件</h3>
    <button @click="show = true">显示此组件</button>
    <child v-if="show" />
  </div>
</template>

<script>
import { defineComponent, defineAsyncComponent, ref } from 'vue'
// import from 语法，导入的组件模块会打包到主入口文件中，如果你的项目中组件过多，此写法会让主入口文件变大，从而让首次打开速度变慢，白屏时间过长。
// import child from './components/child.vue'

// 异步组件，按需加载，代码拆分为一个独立模块，让主文件减少体积  vue3
const child = defineAsyncComponent(() => import('./components/child.vue'))

// 此写法可以在选项式中使用ts的写法
// 此写法语法提示更好
export default defineComponent({
  components: {
    // vue2中写法，vue3不支持
    // child:()=>import('./components/child.vue')
    child
  },
  setup() {
    const show = ref(false)
    return {
      show
    }
  }
})
</script>

<style lang="scss" scoped></style>
